<template>
  <div
    class="resizable-box"
    v-resizable.top.left.right.bottom="{
      enabled: true,
      maxHeight: 600,
      minHeight: 50,
      maxWidth: 600,
      minWidth: 50
    }"
    @resize-end="resizeEnd"
    style="width: 300px; height: 300px; background-color: #29e; color: white; padding: 10px"
  >
    Content
  </div>
</template>
<script>
export default {
  data() {
    return {
      resizableValue: {
        maxHeight: 600,
        minHeight: 50,
        maxWidth: 600,
        minWidth: 50
      }
    };
  },
  methods: {
    resizeEnd(e) {
      console.log('resize-end', e);
    }
  }
};
</script>
